<template>
    <div class="login-form-frame">
        <a-form 
            v-bind:form="form"
            v-bind:label-col="{ span: 5 }" 
			v-bind:wrapper-col="{ span: 12 }" 
            v-on:submit="handleSubmit">
            <!-- <a-button v-on:click="test">测试</a-button> -->
            <a-form-item label="name">
                <a-input
                    v-decorator="['name',{
                        initialValue:'admin',
	        			rules:[{ 
	        				required: true, 
	        				message: 'Please input your name!' 
	        			},{
	        				min:5,
	        				message: '用户名不可低于5位!' 
	        			}] 
                    }]"
                 />
            </a-form-item>
            <a-form-item label="password">
	    		<a-input 
	    			v-decorator="['password', { 
	    				initialValue:'123456',
	    				rules: [{ 
                            required: true, message: 'Please input your password!' 
                        }]
	    			}]"
	    			placeHolder="please input your password"
	    		/>
	    	</a-form-item>
	    	<a-form-item :wrapper-col="{ span: 12, offset: 5 }">
		     	<a-button type="primary" html-type="submit">
		        	Submit
		      	</a-button>
		    </a-form-item>
        </a-form>
    </div>
</template>

<script>
import {
    Form,
    Input,
    FormItem,
    Button
} from 'ant-design-vue'
export default {
    name:"login-form",
    props:["login-submit"],     //这是我的神写法，接收函数作为props，强制执行父组件回调，我既不状态管理也不emit
    beforeCreate() {
        this.form = this.$form.createForm(this, {
            name:"loginform"
        });                    //这是ant design的神写法，类似构造函数绑定ref，这里应该可以使用ref，他就是<a-form>组件的引用
    },
    methods:{
        test(){
            console.log(this.form);
        },
        handleSubmit(evt){
            evt.preventDefault();  
            this.form.validateFields((error, values) => {
                if(error){
                    console.error("校验失败")
                }else{
                    this.loginSubmit(values);
                }
      		});
            /**
             * 1、我懒得使用prevent修饰符，看着很不习惯;
             * 2、如果没有粗我上述error为null，否则返回一个对象，包含所有表单控件的错误信息；
             * 3、this.loginSubmit(values);比较容易理解的写法是this.$emit("login-submit",values)
             */
        }
    },
    components:{
        AForm:Form,
        AFormItem:Form.Item,                
        AInput:Input,
        AButton:Button
    }
}
</script>

<style type="text/css" scoped>
	.login-form-frame{
		width: 800px; margin: 100px auto;
	}
</style>
<!--
	Form是必须的知识点，ant design vue的Form是全系列完整组件，包含验证、排版、样式......由于语法的多样性使得
		Form写法变化比较多，我这里的这是一种风格。
	
	如果只是简单的搜索框，只需要a-input样式那就不需要用Form，简单手写一下就行了，但是不做用户校验的情况很少，
		这只是极端简单的情况。
	
	Form API
		layout:'horizontal'|'vertical'|'inline',就我当前实例我没有加这，默认值就是horizontal	
		submit：这个不是Form的api，他是原生dom的api.
	
	Form.create(options) 或 this.$form.createForm(this, options)，前者是jsx高阶组件式写法，在vue中没有<template>流行，
		前者比较难以理解，后者$form这个变量可以推理ant design vue插件开发的时候在install注入的Vue.prototype属性上，
				大概结构应改时这样
				install(vue){
					vue.prototype.$form=function(object,opts){
						//
					}
				}
			ant design vue admin习惯这种写法，其使用示例就是当前页面，
			但是文档中提交可以使用Form.createForm()这一静态方法类似jsx一样使用表单。
			const CustomizedForm = {};
			CustomizedForm = Form.create({})(CustomizedForm);			
			react jsx方式使用表单我是没有问题的，作者就给这么两句我实在是不知道如何将react中的使用方式搬过来。

    form Form.create(options) 或 this.$form.createForm(this, options)
        关于如何接收这个值我之前的写法是错误的，我们看官网给的demo
        <template>
        <a-form :form="form" />
        </template>
        <script>
        export default {
            beforeCreate() {
            this.form = this.$form.createForm(this, options);
            },
        };
        </script>
	Form.Item为内部表单元素提供一层包裹，这里可以理解，向下Form.Item提供将获取v-decorator属性添加的值，
		这就是说v-decorator不是a-input固有的，他是Form.Item需要的。其参数格式为[id,oprions]

	v-decorator的rules为什么是以数组[object,object]?
		jquer.form.js的插件实现的验证思路与这个是一种的，因为校验规则可能不止一个。

	createForm(this,opts)
		opts.name:这个我极度容易误解成表单的name属性，html dom可以使用表单名之间定位表单，我试过了可以直接在a-form上添加name,
			效果是可行的，这里的name是生成表单元素控件id属性值的前缀，避免在整体dom结构中发生id名称冲突
-->